import React, { Component } from 'react';
import {StatusBar, Text, View, TouchableOpacity, DeviceEventEmitter} from 'react-native';
import ScrollableTabView, {ScrollableTabBar, DefaultTabBar} from "react-native-scrollable-tab-view";
import AdvertiseLists from '../advertisement/advertise-lists/AdvertiseLists'
import Toast from 'react-native-easy-toast'
import Loading from '../../components/loading/index'
import {i18n} from "../../utils/locales/i18n";
import {getUserInfo} from "../../utils/login";
import {DeviceStorage} from "../../utils/DeviceStorage";

type Props = {};
export default class AdvertisementScreen extends Component<Props> {
	static navigationOptions = ({ navigation }) => {
		return {
			title: i18n.t('i186'),
			headerStyle: {
				backgroundColor: '#ff7606',
				borderWidth: 0,
				borderColor: '#ff7606'
			},
			headerTintColor: '#fff',
			headerBackTitle: null,
			headerRight: <TouchableOpacity onPress={() => navigation.navigate('AdvertisePublish')}><View style={{ paddingRight: 10 }}><Text style={{color: '#fff'}}>+ {i18n.t('i187')}</Text></View></TouchableOpacity>
		}
	}
	constructor() {
		super()
		this.state = {
			refresh: false
		}
	}
	toAdvertiseModify = (params) => {
        this.props.navigation.navigate('AdvertiseModify', params)
    }
	toAdvertisePublish = () => {
		this.props.navigation.navigate('AdvertisePublish')
	}
    componentDidMount(): void {
		DeviceEventEmitter.addListener('refresh_ad', () => {
			this.setState({
				refresh: true
			})
			setTimeout(() => {
				this.setState({
					refresh: false
				})
			}, 0)
		})
		this._getUserInfo()
	}
	_getUserInfo = async () => {
		await getUserInfo()
		const jwt = await DeviceStorage.get('jwt')
		if (jwt) {
			const userInfoJson = await DeviceStorage.get('user_info')
		} else {
			// 没有登录，跳到登录页
			this.props.navigation.navigate('LoginScreen')
		}
	}
	render() {
		return (
			<View style={{flex: 1, width: '100%'}}>
				{/*<View style={{height: 80, paddingTop: 20, backgroundColor: '#ff7506', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 10}}>*/}
					{/*<View>*/}
						{/*<Text style={{color: '#fff', fontSize: 18}}>广告</Text>*/}
					{/*</View>*/}
					{/*<TouchableOpacity onPress={ this.toAdverPublish }>*/}
						{/*<View>*/}
							{/*<Text style={{color: '#fff', fontSize: 16}}>+ 发布广告</Text>*/}
						{/*</View>*/}
					{/*</TouchableOpacity>*/}
				{/*</View>*/}
				{/*main*/}
				{ !this.state.refresh ? (
					<View style={{flex: 1, backgroundColor: '#f2f2f2'}}>
						{/*nav*/}
						<View style={{flex: 1, width: '100%'}}>
							<ScrollableTabView
								tabBarUnderlineStyle={{backgroundColor: '#ff7807', height: 0}}
								tabBarActiveTextColor='#ff7807'
								tabBarTextStyle={{fontSize: 15}}
								tabBarInactiveTextColor = '#808080'
								renderTabBar={() => <DefaultTabBar style={{borderWidth: 0}} />}
							>
								<AdvertiseLists toAdvertiseModify={ this.toAdvertiseModify } toAdverPublish={ this.toAdvertisePublish } type={0} tabLabel={i18n.t('i67')}/>
								<AdvertiseLists toAdvertiseModify={ this.toAdvertiseModify } toAdverPublish={ this.toAdvertisePublish } type={1} tabLabel={i18n.t('i188')}/>
								<AdvertiseLists toAdvertiseModify={ this.toAdvertiseModify } toAdverPublish={ this.toAdvertisePublish } type={2} tabLabel={i18n.t('i156')}/>
								<AdvertiseLists toAdvertiseModify={ this.toAdvertiseModify } toAdverPublish={ this.toAdvertisePublish } type={3} tabLabel={i18n.t('i158')}/>
							</ScrollableTabView>
						</View>
					</View>
				) : null  }
			</View>

		);
	}
}
